<template>
  <el-card :body-style="{ padding: '0px' }">
    <div slot="header"
         class="clearfix">
      <!-- 面包屑导航 -->
      <bread :navone="'商品管理'"
             :navtwo="'商品列表'" />
    </div>
    <el-row>
      <!-- 搜索输入框 -->
      <el-col :span='8'>
        <el-input placeholder="请输入内容"
                  class="input-with-select"
                  style='width:"400px";'
                  v-model="search">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click='searchbtn'></el-button>
        </el-input>
      </el-col>
      <!-- 添加商品按钮 -->
      <el-col :span='16'>
        <el-button type="success"
        @click="goadd"
                   plain>添加商品</el-button>
      </el-col>
    </el-row>
    <!-- 商品表格 -->
    <el-table :data="tableData"
              style="width: 100%"
              border>
      <el-table-column type="index"
                       width="50">
      </el-table-column>
      <el-table-column prop="goods_name"
                       label="商品名称"
                       width="280">
      </el-table-column>
      <el-table-column prop="goods_price"
                       label="商品价格(元)"
                       width="180">
      </el-table-column>
      <el-table-column prop="goods_weight"
                       label="商品重量">
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.add_time | mymoment('YYYY-MM-DD hh:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button type="primary"
                     icon="el-icon-edit"
                     size='mini'
                     plain></el-button>
          <el-button type="danger"
                     icon="el-icon-delete"
                     size='mini'
                     plain></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pagenum"
                   :page-sizes="[5, 10, 15]"
                   :page-size="pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
import bread from '../bread/bread.vue'
export default {
  components: {
    bread
  },
  data () {
    return {
      tableData: [], // 表格数据
      pagesize: 5, // 页容量
      pagenum: 1, // 当前页数
      total: null, // 商品总数
      search: '' // 搜索内容
    }
  },
  created () {
    this.getgoodsdata()
  },
  methods: {
    // 查询对应页码,页容量的数据
    async getgoodsdata () {
      let res = await this.$http.get(`goods?pagenum=${this.pagenum}&pagesize=${this.pagesize}&query=${this.search}`)
      let { meta, data } = res.data
      if (meta.status === 200) {
        this.tableData = data.goods
        this.total = data.total
      }
    },
    // 改变当前页容量
    handleSizeChange (val) {
      this.pagesize = val
      this.getgoodsdata()
    },
    // 改变当前页码
    handleCurrentChange (val) {
      this.pagenum = val
      this.getgoodsdata()
    },
    // 搜索内容
    searchbtn () {
      this.getgoodsdata()
    },
    goadd () {
      this.$router.push('/goods/add')
    }
  }
}
</script>

<style>
</style>
